<template>
  <!--检查台账-->
  <div class="checkareaList">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" @click="clear_S">
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>预警台账
      <mu-button icon slot="right" @click="searchcontroll = true">
        <!--<i class="iconfont iconshaixuan4"></i>-->
      </mu-button>
    </mu-appbar>
    <!-- 顶部 Tab 切换开始 -->
    <div class="t-header">
      <mTabs v-model="active1" :tabList="tabList1" @change="handleTopTabChange()" position="center"></mTabs>
      <mTabs v-model="active" :tabList="tabList" @change="handleTopTabChange()"></mTabs>
    </div>
    <!-- 顶部 Tab 切换结束 -->
    <section class="t-body">
      <!-- 平面图开始 -->
      <div class="lan-loadmore-content lan-steper" v-if="active === 1">
        <mTree
          v-show="tree.data.length"
          :data="tree.data"
          :showTotal="true"
          :getName="'count'"
          :props="tree.defaultProps"
          :clickableConditions="tree.clickableConditions"
          @click="skipPage"
        ></mTree>
        <NoData v-if="!tree.data.length" />
      </div>

      <warringareaList @getData="getData" v-bind:datas="arr" v-show="active === 2"></warringareaList>
      <!--v-bind:data=""-->
      <!-- 平面图结束 -->
      <Org
        ref="org"
        v-model="org"
        orgType="currOrgProject"
        @change="orgChange"
        :open="orgDialog"
        @open="openOrgDialog"
        @close="closeOrgDialog"
        @confirm="orgConfirm"
      ></Org>
    </section>
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="opens">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="closeFullscreenDialog">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{this.name}}
      </mu-appbar>
      <warringareaList @getData="getData" v-bind:datas="arr"></warringareaList>
    </mu-dialog>

    <!-- 筛选 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="searchcontroll"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>

          <mu-form-item label="结束时间">
            <mu-date-input
              v-model="form.endTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="检查人">
            <mu-text-field v-model="form.projectName" placeholder="请输入"></mu-text-field>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>
  </div>
</template>

<script>
import mTree from "@/tree/mTree";
import Org from "@/select/org/Org.vue";
import mTabs from "./../../../../components/tabs/mTabs";
import warringareaList from "./warringareaList";

export default {
  name: "warringParameter",
  components: {
    mTree,
    Org,
    mTabs,
    warringareaList
  },
  data() {
    return {
      obj_org:{},
      id:'',
      pageSize: 10,
      pageNo: 0,
      form: {
        startTime: "",
        endTime: "",
        partItemName: "", //检查人
        projectName: ""
      },
      searchcontroll: false,
      name: "",
      opens: false,
      arr: [],
      totalPage: 1,
      obj: {},
      dataPool: {},
      // 组织弹窗状态
      orgDialog: false,
      // 组织
      org: [],
      currentOrg: {},
      tabList1: [{ id: 0, name: "未完成" }, { id: 1, name: "已完成" }],
      tabList: [{ id: 1, name: "平面图" }, { id: 2, name: "列表" }],
      num: 20,
      refreshing: false,
      loading: false,
      text: "List",
      open: false,
      active: 1,
      active1: 0,
      tree: {
        defaultProps: {
          id: "id",
          name: "name",
          children: "children"
        },
        clickableConditions: {
          all: {
            //所有的是否可以点击
            enable: true
          },
          part: {
            //部分的可以点击的条件
            prop: "orgType",
            value: [1]
          }
        },
        data: [],

      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name == "WarningMessage") {
        vm.orgDialog = false;
      }
    });
  },
  mounted() {
    // this.loadTreeData();
    if (sessionStorage.getItem('tabs') == undefined) {
      this.active = 1;
      this.orgDialog = true;
    }else {
      this.active = Number(sessionStorage.getItem('tabs'));
      this.orgDialog = false;
    }
  },
  created() {
    let orgInfo = this.$A.GS("orgInfo");
    this.currentOrg.type = this.$route.query.type ||  this.obj_org["type"];
    this.currentOrg.value = this.$route.query.orgId || this.obj_org["orgId"];
    this.currentOrg.label = this.$route.query.label || orgInfo.label;
    // if (this.currentOrg.type == "1") {
      this.loadTreeData();
      this.getData();
    // } else {
      this.orgDialog = true;
    // }
  },
  methods: {
    clear_S () {
      sessionStorage.removeItem('tabs');
      this.orgDialog = true;
    },
    //查询
    search() {
      this.getData();
      this.searchcontroll = false;
    },
    //清空
    clearSearch() {
      this.form = {
        startTime: "",
        endTime: "",
        partItemName: "", //检查人
        projectName: ""
      };
    },
    getData(val, id) {
      if (this.pageNo > this.totalPage) {
        // this.$closeLoading();
        return;
      }
      this.pageNo += 1;
      let option = {
        orgId: this.currentOrg.value,
        type: this.currentOrg.type,
        areaId: this.id, //否	string		区域id
        alarmType:this.active1, //	否	string		0未完成 1已完成
        current: this.pageNo, //是	int		当前页
        size: this.pageSize, //是	int		当前页大小
        startTime: this.form.startTime, //	否	string		开始时间
        endTime: this.form.endTime, //	否	string		结束时间
        problemUserId: this.form.partItemName //是	String		检查人
      };
      this.$A
        .Go("get", "/safety/alarm/otRectWarning/pageList", option)
        .then(response => {
          if (response.code == 200) {
            let data = response.body.rows;
            this.arr = this.arr.concat(data);
            let total = response.body.page.rows || "0";
            this.totalPage = Math.ceil(total / this.pageSize);
          }
        });
    },
    //table 切换
    handleTopTabChange() {
      sessionStorage.setItem("tabs",this.active);
      this.id = '';
      this.arr = [];
      this.pageNo = 0;
      if (this.active === 1) {
        this.loadTreeData(this.active1)
      } else{
        this.getData(this.active1);
      }
    },
    // 组织选择结果确认
    orgConfirm() {
      console.log(this.org[0]);
      this.orgDialog = false;
    },
    // 打开组织选择弹窗
    openOrgDialog() {
      this.orgDialog = true;
    },
    // 关闭组织选择弹窗
    closeOrgDialog() {
      this.orgDialog = false;
      this.$router.back();
    },
    // 组织选择
    orgChange(ev) {
      let orgInfo = {
        orgId: ev[0].value,
        orgName: ev[0].label,
        type: ev[0].type
      };
      this.obj_org = orgInfo;
     this.loadTreeData();
     this.getData();
    },

    loadTreeData() {
      this.$openLoading();
      let params = {
        orgId: this.currentOrg.value,
        type: this.currentOrg.type,
        // projectId:'',
        taskAndProblemAlarmType: this.active1 //0未完成 1已完成
      };
      this.$A
        .Go("get", "/safety/projectArea/alarmRec/count", params)
        .then(response => {
          this.$closeLoading();
          if (response.code == 200) {
            this.tree.data =
              response.body.treeNodeList && response.body.treeNodeList.length
                ? response.body.treeNodeList
                : [];
            this.dataPool = response.body;
            this.tabList1[0].name = `未完成${this.dataPool.unFinishAlarmCount}`;
            this.tabList1[1].name = `已完成${this.dataPool.finishAlarmCount}`;
          } else {
            this.tree.data = [];
          }
        });
    },
    //点击平面图 回调
    skipPage(treeRowData) {
      console.log(treeRowData);
      this.datas = [];
      this.pageNo = 0;
      let obj = treeRowData;
      this.id = obj.id;
      this.getData(this.active1);
      this.opens = true;
      this.name = obj.name;
    },
    closeFullscreenDialog() {
      this.opens = false;
    },
    closeBottomSheet(isnot) {
      this.open = isnot;
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === "List" ? "Menu" : "List";
        this.num = 20;
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 20;
      }, 2000);
    }
  }
};
</script>
<style lang="scss" scoped>
.checkareaList {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .t-header {
    padding-top: 0.1rem;
  }
  .t-body {
    flex: 1;
    overflow: auto;
    padding: 0.1rem 0;
    .lan-loadmore-content {
      height: 100%;
      padding:0;
    }
  }
}
</style>
